/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from "react";
import { useParams, useHistory } from "react-router-dom";
import productApi from "../../api/product";
import {
  Form,
  Input,
  InputNumber,
  message,
  Cascader,
  Card,
  Breadcrumb,
  Space,
  Button,
  Select,
} from "antd";
import tabsApi from "../../api/tabs";
import { useNavs } from "../../hook/navs";

const layout = {
  labelCol: {
    span: 12,
  },
  wrapperCol: {
    span: 12,
  },
};
const { Option } = Select;
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
  required: "${label} 不能为空",
  types: {
    email: "${label} 不是有效的邮箱!",
    number: "${label} 不是有效的数字!",
  },
  number: {
    range: "${label}在${min}到${max}之间",
  },
};
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
  const params = useParams();
  const history = useHistory();
  const [tabs, setTabs] = useState([
    {
      _id: "61a47d7512c56a037c641830",
      navsId: "619d9b8674f55a1b0079f42d",
      name: "啤酒",
      __v: 0,
    },
  ]);
  const { id } = params;
  const [{ rows }, { getAllNavs }] = useNavs();
  useEffect(() => {
    getAllNavs();
  }, [getAllNavs]);
  useEffect(() => getShop(id), [getShop, id]);

  let navsOriginId = "";
  let navsOriginName = "";
  let tabsOriginId = "";
  let tabsOriginName = "";
  const [form] = Form.useForm();
  async function getShop(id) {
    const data = await productApi.getOne(id);
    const tabs = await tabsApi.getTabs(data.navsId);
    console.log(data);
    console.log(tabs);
    form.setFieldsValue({
      navsId: data.navsId.name,
      tabsId: data.tabsId.name,
      name: data.name,
      count: data.count,
      price: data.price,
      desc: data.desc,
      image: data.image,
    });
    navsOriginName = data.navsId.name;
    navsOriginId = data.navsId._id;
    tabsOriginName = data.tabsId.name;
    tabsOriginId = data.tabsId._id;
    return tabs;
  }
  const onFinish = async (value) => {
    const _id = id;
    console.log(value);
    if (value.navsId === navsOriginName) {
      value.navsId = navsOriginId;
    }
    if (value.tabsId === tabsOriginName) {
      value.tabsId = tabsOriginId;
    }
    const newData = { ...value, _id };
    const data = await productApi.change(newData);
    if (data.status) {
      await message.success("修改成功");
      history.push(`/info/productlist`);
    } else {
      message.error("修改失败");
    }
  };
  const onGenderChange = async (value) => {
    // eslint-disable-next-line default-case
    const data = await tabsApi.getTabs(value);
    setTabs(data);
  };

  return (
    <div className="site-card-border-less-wrapper">
      <Space direction="vertical" style={{ width: "100%" }}>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item>主页</Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/product">商品</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/product">更新商品</a>
            </Breadcrumb.Item>
          </Breadcrumb>
        </Card>
        <Card>
          <Form
            style={{ width: "600px", marginLeft: "133px" }}
            {...layout}
            name="complex-form"
            onFinish={onFinish}
            form={form}
            validateMessages={validateMessages}
          >
            <Form.Item
              name={"name"}
              label="商品名称"
              rules={[{ required: true }]}
            >
              <Input placeholder="请输入商品名称"/>
            </Form.Item>

            <Form.Item
              name={"navsId"}
              label="商品大类"
              rules={[{ required: true }]}
            >
              <Select
                onChange={onGenderChange}
                placeholder="请选择商品大类"
                allowClear
              >
                {rows.map((item, index) => (
                  <Option key={item._id} value={item._id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              name={"tabsId"}
              label="商品小类"
              rules={[{ required: true }]}
            >
              <Select placeholder="请选择商品小类">
                {tabs.map((item, index) => (
                  <Option key={item._id} value={item._id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              name="count"
              label="商品库存"
              rules={[
                {
                  type: "number",
                  required: true,
                  min: 0,
                  max: 999,
                },
              ]}
            >
              <InputNumber style={{width:"300px"}} placeholder="请输入商品库存"/>
            </Form.Item>
            <Form.Item
              name="price"
              label="商品价格"
              rules={[
                {
                  type: "number",
                  required: true,
                  min: 0,
                  max: 999,
                },
              ]}
            >
              <InputNumber style={{width:"300px"}} placeholder="请选择商品价格"/>
            </Form.Item>

            <Form.Item name="desc" label="商品描述">
              <Input.TextArea />
            </Form.Item>
            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 12 }}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Space>
    </div>
  );
};
